<template>
    <div class="nopay-wrap">
        <div id="mescroll" class="mescroll"  v-mescroll="{up:'upCallback',size:page.size,num:page.num}">
            <div class="mescroll-bounce">
                <div class="wrapper">
                    <!--头部-->
                    <pheader text = '请购买该付费读'></pheader>
                    <div class="nopay">
                        <div class="iconbox"><img class='imgbox' src="/src/assets/image/danpin-chakan.png" alt=""></div>
                        <p>该内容属于付费知识。</p>
                        <p>以下知识包含该内容，请从以下选择要购买的知识：</p>
                    </div>
                    <div class="grayline"></div>
                    <column-list :list='recommendlist' class="list-out"></column-list>

                    <!--<recommend :recommend="recommendlist"></recommend>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // import recommend from '../../component/detail/recommend.vue'
    import {actService} from '../../service/activityService'
    import columnlist from '../../component/list/column-list.vue'
    export default {
        components:{
            // 'recommend':recommend,
            'column-list':columnlist },
        data () {
            return {
               recommendlist:[],
                page:{num:1,size:5},
                busy:true,
                lastPage:false
            }
        },
        mounted() {
            document.title = "请购买该付费读"
            const that = this;
            that.upCallback();
        },
        methods: {
            upCallback: function () {
                let that = this;
                that.getListData();
            },
            getListData:function() {
                let that = this;
                actService.listKnow({
                    queryType: 4,
                    singleId:that.$route.params.id,
                    pageNo: that.page.num,
                    pageSize: that.page.size
                }).then(function(res){
                    if(!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if(that.page.pageNo*1===1){
                        that.recommendlist =res.data.datas.datas
                    }else{
                        for(let i in list){
                            that.recommendlist .push(list[i])
                        }
                    }
                    that.page.num+=1
                    if(that.mescroll) that.mescroll.endSuccess(list.length);
                })
            }
        }
    }
</script>

<style lang="less">
    @import url('../../assets/js/mescroll/mescroll.min.css');
.mescroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
    .nopay{
        padding: .5rem .8rem;
        .iconbox{
            text-align: center;
            height: 1.5rem;
        }
        .imgbox{
            width:3.5rem;
        }
        p{
            font-size: 15px;
            color: #333333;
            letter-spacing: 0.25px;
        }
        
    }
    .grayline{
        background: #F9F9F9;
        width: 100%;
        height: .213rem;
        margin-bottom: .5rem;
    }
</style>